import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import './index.scss';
import dataSource from './data.json';
import View from './component/view';

import { Layout, Tree,Button,Form,Table,Input,Checkbox,Divider,Spin,InputNumber,Modal,Pagination} from 'antd';

const { Content,Sider,Header } = Layout;

class Shared extends Component{

  state={
    page:1,
    totalPage:2,
    total:20,
    name:'',
    editorVisible:false,
    type:'already',
    view:false
  }

  already=()=>{
      this.setState({
          type:'already'
      })
  }
  wait=()=>{
      this.setState({
          type:'wait'
      })
  }

  handleAdd=()=>{
    this.setState({
      addVisible:true
    })
  }

  changePage=(page)=>{
    this.setState({
        page
    })
}
  addCategory=()=>{
    this.formRef.current.validateFields().then(values=>{
      console.log(values);
      this.setState({
        addVisible:false
      })
    })
  }

  handleCancel=()=>{
    this.setState({
      view:false
    })
  }

  view=(record)=>{
    this.setState({
      view:true
    })
  }

  editor=(record)=>{
    this.setState({
      editorVisible:true
    })
  }

  editorCancel=()=>{
    this.setState({
      editorVisible:false
    })
  }

  editorCategory=()=>{
    this.setState({
      editorVisible:false
    })
  }

  componentDidMount(){
    this.setState({
      dataSource:dataSource
    })
  }
  render(){
    const {page,totalPage,total,name,editorVisible,view,type}=this.state;
    const columns=[
        {
            title:'序号',
            key:'index',
            dataIndex:'index',
        },
        {
            title:'资源代码',
            key:'resourceCode',
            dataIndex:'resourceCode',
        },
        {
            title:'资源名称',
            key:'name',
            dataIndex:'name',
            render:(text)=>{
                return <span style={{color:'rgb(0,126,220)'}}>{text}</span>
            }
        },
        {
            title:'资源提供方',
            key:'provider',
            dataIndex:'provider',
        },
        {
            title:'共享类型',
            key:'shareType',
            dataIndex:'shareType',
        },
        {
            title:'共享方式',
            key:'shareMethod',
            dataIndex:'shareMethod',
        },
        {
            title:'资源格式',
            key:'shareFormat',
            dataIndex:'shareFormat',
        },
        {
            title:'资源状态',
            key:'shareStatus',
            dataIndex:'shareStatus',
        },
        {
            title:'操作',
            key:'action',
            dataIndex:'action',
            render:(text,record)=>{
            return <div>
                        <span className='action' onClick={()=>this.view(record)}>{type==='already'?'查看':'审核'}</span>
                    </div>
            }
        },
    ]
    const titleStyle={
      color:'rgb(0,126,220)',height:54.6,width:'100%',backgroundColor:'#f0f3f6',position:'absolute',left:0,top:0,display:'flex',
      alignItems:'center',paddingLeft:24,fontWeight:'bold',borderBottom:'2px solid #e5e6e8',zIndex:2
    }
    const footerStyle={
      backgroundColor:'#e6eef5',width:'100%',height:53,position:'absolute',left:0,bottom:0,
      display:'flex',alignItems:'center',justifyContent:'center'
    }
    const formItemStyle={color:'rgb(0,126,220)',fontWeight:'bold'};
    const validateMessages = {
      required: "请输入",
    };
    return(

        <Content className='metadata-content' >
            <Layout >
                <Header className='header'>
                    <p className='title'><a style={{color:'black'}}>已共享资源</a></p>
                </Header>
                <Content className='content'>
                    <div className='button'>
                        <Button type={type==='already'?'primary':'default'} onClick={this.already}>已审核</Button>
                        <Button type={type==='wait'?'primary':'default'} onClick={this.wait}>待审核</Button>
                    </div>
                    <div className='table-box'>
                        <Spin spinning={false}>
                        <Table
                            columns={columns}
                            dataSource={dataSource}
                            className='table'
                            pagination={false}
                        />
                        <Pagination current={page} pageSize={10} total={total} onChange={this.changePage} style={{position:'absolute',bottom:20,right:10}}/>
                        <div className='footer'>
                            显示<InputNumber min={1} max={totalPage} defaultValue={page} />项结果，共{total}项
                        </div>
                        </Spin>
                    </div>
                </Content>
            </Layout>
            <Modal
                title={<div style={titleStyle}>查看</div>}
                visible={view}
                width={800}
                onCancel={this.handleCancel}
                bodyStyle={{backgroundColor:'#f0f3f6',overflow:'auto',height:540}}
                footer={<div style={footerStyle}>
                    <Button type='primary' style={{color:'white',borderRadius:5}} onClick={this.handleCancel}>确定</Button>
                </div>}
                >
                <View/>
            </Modal>
            <Modal
            title={<div style={titleStyle}>编辑</div>}
            visible={editorVisible}
            onCancel={this.editorCancel}
            bodyStyle={{backgroundColor:'#f0f3f6'}}
            footer={<div style={footerStyle}>
                <Button type='primary' style={{color:'white',borderRadius:5}} onClick={this.editorCategory}>保存</Button>
                <Button style={{color:'#007cdb',borderRadius:5}} onClick={this.editorCancel}>取消</Button>
            </div>}
            >

            </Modal>
        </Content>
    )
  }
}

const mapStateToProps = (state) => {
  return {
  }
}

const mapDispatchToProps = (dispatch) => ({
})

export default connect(mapStateToProps, mapDispatchToProps)(Shared);